<template>
<div>
<a-form :form="form" @submit.prevent="onSubmit">
      <a-form-item label="上级菜单" :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          v-decorator="['pid']"
          placeholder="请选择上级菜单"
        >
          <a-select-option v-for="v in menus" :key="v.id" :value="v.id">
            {{v.name}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item  label="菜单名称" :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input placeholder="菜单名称" v-decorator="[
          'name',
           {rules: [{ required: true, message: '请输入菜单名称' }]}
        ]"/>
      </a-form-item>
      <a-form-item label="菜单路径" :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input placeholder="菜单路径" v-decorator="[
          'url']"/>
      </a-form-item>
      <a-form-item  :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <span slot="label">
        菜单图标&nbsp;
        <a href="https://vue.ant.design/components/icon-cn/" >
          <a-tooltip title="点击进入页面复制图标">
          <a-icon type="question-circle-o" style="color: red"/>
          </a-tooltip>
        </a>
        
      </span>
        <a-input placeholder="菜单图标" v-decorator="[
          'icon']"/>
      </a-form-item>
      <a-form-item label="状态" :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-decorator="['status',{initialValue:1}]">
          <a-radio :value="1" >
            启用
          </a-radio>
          <a-radio :value="0">
            禁止
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否为菜单" :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-radio-group v-decorator="['is_menu',{initialValue:1}]">
          <a-radio :value="1" >
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="备注"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-textarea
          rows="4"
          placeholder="请输入备注"
          v-decorator="[
            'remark']" />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button type="primary" html-type="submit">
          提交
        </a-button>
      </a-form-item>
</a-form>
</div>
</template>




<script>
    export default {
    	data(){
    		return {
        menus:[],
        form: this.$form.createForm(this),
    		labelCol:{lg: {span: 7}, sm: {span: 7}},
        wrapperCol:{lg: {span: 10}, sm: {span: 17} }
			 
    		}
    	},
    	mounted(){
    		this.http('get','servicemenu/list').then(res=>{
          this.menus = res
        })
		  },
    	methods: {
		    onSubmit(form){
          this.form.validateFields((err, values) => {
            if(!err){
              this.postData(values).then(res=>{
                if(res.id){
                  this.$message.success(res.msg, 1);
                  this.$router.push('/servicemenu')
                }else{
                  this.$message.error(res.msg, 1);
                }
              })
              
            }
          })
          
        },
        async postData(param){
          let data = await this.http('post','servicemenu/create',param);
          return data;
        }
    	}
    
    
 }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
